<template>
    <view>
        <cu-custom bgColor="bg-white" :isBack="true">
            <block slot="content">收款账户</block>
        </cu-custom>
        <view class="padding">
            <view class="item crow padding-lg bg-white radius-xl margin-bottom"
                @tap="$utils.$page.open('/pages/user/finance/save?channels=alipay_payment_code')">
                <image src="@/static/image/account/alipay_payment_code.png" class="icon" />
                <view class="left text-left padding-left">支付宝收款码</view>
                <view class="right text-right" v-if="account.alipay_payment_code.name">{{ account.alipay_payment_code.name
                }}</view>
                <view class="right text-right text-grey" v-else>未设置</view>
                <text class="cuIcon-right"></text>
            </view>
            <view class="item crow padding-lg bg-white radius-xl margin-bottom"
                @tap="$utils.$page.open('/pages/user/finance/save?channels=wechat_payment_code')">
                <image src="@/static/image/account/wechat_payment_code.png" class="icon" />
                <view class="left text-left padding-left">微信收款码</view>
                <view class="right text-right" v-if="account.wechat_payment_code.name">{{ account.wechat_payment_code.name
                }}</view>
                <view class="right text-right text-grey" v-else>未设置</view>
                <text class="cuIcon-right"></text>
            </view>
            <view class="item crow padding-lg bg-white radius-xl margin-bottom"
                @tap="$utils.$page.open('/pages/user/finance/save?channels=wechat_transfer')">
                <image src="@/static/image/account/wechat_transfer.png" class="icon" />
                <view class="left text-left padding-left">转账到微信零钱</view>
                <view class="right text-right" v-if="account.wechat_transfer.name">{{ account.wechat_transfer.name }}</view>
                <view class="right text-right text-grey" v-else>未设置</view>
                <text class="cuIcon-right"></text>
            </view>
            <view class="item crow padding-lg bg-white radius-xl margin-bottom"
                @tap="$utils.$page.open('/pages/user/finance/save?channels=bank_transfer')">
                <image src="@/static/image/account/bank_transfer.png" class="icon" />
                <view class="left text-left padding-left">银行卡转账</view>
                <view class="right text-right" v-if="account.bank_transfer.name">{{ account.bank_transfer.bank }} {{
                    account.bank_transfer.name }}</view>
                <view class="right text-right text-grey" v-else>未设置</view>
                <text class="cuIcon-right"></text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pageLoading: false,
            account: {
                alipay_payment_code: {
                    channels: 'alipay_payment_code',
                    name: '',
                    mobile: '',
                    qrcode: ''
                },
                wechat_payment_code: {
                    channels: 'wechat_payment_code',
                    name: '',
                    mobile: '',
                    qrcode: ''
                },
                wechat_transfer: {
                    channels: 'wechat_transfer',
                    name: '',
                    mobile: ''
                },
                bank_transfer: {
                    channels: 'bank_transfer',
                    name: '',
                    mobile: '',
                    account: '',
                    bank: ''
                },
            }
        };
    },
    onLoad() {
    },
    onShow() {
        this.getAccount();
    },
    methods: {
        getAccount() {
            this.$utils.$api.UserFinanceAccount.index().then((data) => {
                for (const key in data) {
                    if (Object.hasOwnProperty.call(data, key)) {
                        const item = data[key];
                        this.account[key] = item;
                    }
                }
            }).catch((err) => {
                this.$utils.$message.error(err.msg);
            })
        }
    }
}
</script>

<style lang="less" scoped>
.item {
    width: 100%;
        .icon{
            width: 60rpx;
            height: 60rpx;
        }

    .left {}

    .right {
        flex: 1;
    }
}
</style>
